<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Crafty - Crafty.viewport</title>
	<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />

	<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' 	type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
	<link rel="shortcut icon" href="/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="/github.css"/>
	<script type="text/javascript">

		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-23935213-2']);
		_gaq.push(['_trackPageview']);

		(function () {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();

	</script>
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/">Home</a></li>
						<li><a href="/getting-started/">Getting started</a></li>
						<li><a href="/documentation/">Documentation</a></li>
						<li><a href="/api/">API</a></li>
						<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
						<li><a href="/components/">Components</a></li>
						<li class="emph"><a href="/#install">Download</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Crafty.viewport <span></span></h1><div class="doclet" id="Crafty-viewport"><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L5-L45">src/graphics/viewport.js#L5-L45</a></div><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>ViewportScroll </dt><dd>when the viewport&#x27;s x or y coordinates change</dd></dl><dl class="trigger"><dt>ViewportScale </dt><dd>when the viewport&#x27;s scale changes</dd></dl><dl class="trigger"><dt>ViewportResize </dt><dd>when the viewport&#x27;s dimension&#x27;s change</dd></dl><dl class="trigger"><dt>InvalidateViewport </dt><dd>when the viewport changes</dd></dl><dl class="trigger"><dt>StopCamera </dt><dd>when any camera animations should stop, such as at the start of a new animation.</dd></dl><dl class="trigger"><dt>CameraAnimationDone </dt><dd>when a camera animation reaches completion</dd></dl></div></div><span class="markdown"><p>Viewport is essentially a 2D camera looking at the stage. Can be moved or zoomed, which
in turn will react just like a camera moving in that direction.</p>
<p>There are multiple camera animation methods available - these are the viewport methods with an animation time parameter and the <code>follow</code> method.
Only one animation can run at a time. Starting a new animation will cancel the previous one and the appropriate events will be fired.</p>
<p>Tip: At any given moment, the stuff that you can see is...</p>
<p><code>x</code> between <code>(-Crafty.viewport._x)</code> and <code>(-Crafty.viewport._x + (Crafty.viewport._width / Crafty.viewport._scale))</code></p>
<p><code>y</code> between <code>(-Crafty.viewport._y)</code> and <code>(-Crafty.viewport._y + (Crafty.viewport._height / Crafty.viewport._scale))</code></p>
</span><div class="example"><h4>Example</h4><span class="markdown"><p>Prevent viewport from adjusting itself when outside the game world.
Scale the viewport so that entities appear twice as large.
Then center the viewport on an entity over the duration of 3 seconds.
After that animation finishes, start following the entity.</p>
<pre><code class="hljs "><span class="hljs-keyword">var</span> ent = Crafty.e(<span class="hljs-string">'2D, DOM'</span>).attr({<span class="hljs-attr">x</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>});

Crafty.viewport.clampToEntities = <span class="hljs-literal">false</span>;
Crafty.viewport.scale(<span class="hljs-number">2</span>);
Crafty.one(<span class="hljs-string">"CameraAnimationDone"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    Crafty.viewport.follow(ent, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
});
Crafty.viewport.centerOn(ent, <span class="hljs-number">3000</span>);</code></pre></span></div></div><div><h4>Properties</h4><ul class="page-toc"><li><a href="#Crafty-viewport-_scale">._scale</a></li><li><a href="#Crafty-viewport-bounds">.bounds</a></li><li><a href="#Crafty-viewport-clampToEntities">.clampToEntities</a></li><li><a href="#Crafty-viewport-y">.y</a></li><li><a href="#Crafty-viewport-x">.x</a></li></ul><h4>Methods</h4><ul class="page-toc"><li><a href="#Crafty-viewport-centerOn">.centerOn()</a></li><li><a href="#Crafty-viewport-mouselook">.mouselook()</a></li><li><a href="#Crafty-viewport-follow">.follow()</a></li><li><a href="#Crafty-viewport-onScreen">.onScreen()</a></li><li><a href="#Crafty-viewport-pan">.pan()</a></li><li><a href="#Crafty-viewport-rect">.rect()</a></li><li><a href="#Crafty-viewport-scale">.scale()</a></li><li><a href="#Crafty-viewport-scroll">.scroll()</a></li><li><a href="#Crafty-viewport-zoom">.zoom()</a></li></ul><div class="doclet" id="Crafty-viewport-_scale"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport._scale</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L87-L98">src/graphics/viewport.js#L87-L98</a></div><span class="markdown"><p>This value is the current scale (zoom) of the viewport. When the value is bigger than 1, everything
looks bigger (zoomed in). When the value is less than 1, everything looks smaller (zoomed out). This
does not alter the size of the stage itself, just the magnification of what it shows.</p>
<p>This is a read-only property: Do not set it directly. Instead, use <code>Crafty.viewport.scale(...)</code>
or <code>Crafty.viewport.zoom(...)</code></p>
</span></div><div class="doclet" id="Crafty-viewport-bounds"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.bounds</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L102-L124">src/graphics/viewport.js#L102-L124</a></div><span class="markdown"><p>A rectangle which defines the bounds of the viewport.
It should be an object with two properties, <code>max</code> and <code>min</code>,
which are each an object with <code>x</code> and <code>y</code> properties.</p>
<p>If this property is null, Crafty uses the bounding box of all the items
on the stage.  This is the initial value.  (To prevent this behavior, set <code>Crafty.viewport.clampToEntities</code> to <code>false</code>)</p>
<p>If you wish to bound the viewport along one axis but not the other, you can use <code>-Infinity</code> and <code>+Infinity</code> as bounds.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#Crafty-viewport-clampToEntities">.clampToEntities</a></li></ul></div><div class="example"><h4>Example</h4><span class="markdown"><p>Set the bounds to a 500 by 500 square:</p>
<pre><code class="hljs ">Crafty.viewport.bounds = {<span class="hljs-attr">min</span>:{<span class="hljs-attr">x</span>:<span class="hljs-number">0</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">0</span>}, <span class="hljs-attr">max</span>:{<span class="hljs-attr">x</span>:<span class="hljs-number">500</span>, <span class="hljs-attr">y</span>:<span class="hljs-number">500</span>}};</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-clampToEntities"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.clampToEntities</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L47-L56">src/graphics/viewport.js#L47-L56</a></div><span class="markdown"><p>Decides if the viewport functions should clamp to game entities.
When set to <code>true</code> functions such as Crafty.viewport.mouselook() will not allow you to move the
viewport over areas of the game that has no entities.
For development it can be useful to set this to false.</p>
</span></div><div class="doclet" id="Crafty-viewport-y"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.y</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L73-L84">src/graphics/viewport.js#L73-L84</a></div><span class="markdown"><p>Will move the stage and therefore every visible entity along the <code>y</code>
axis in the opposite direction.</p>
<p>When this value is set, it will shift the entire stage. This means that entity
positions are not exactly where they are on screen. To get the exact position,
simply add <code>Crafty.viewport.y</code> onto the entities <code>y</code> position.</p>
</span></div><div class="doclet" id="Crafty-viewport-centerOn"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.centerOn()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L307-L323">src/graphics/viewport.js#L307-L323</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.centerOn</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">target</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">time</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Object target </dt><dd><span class="markdown"><p>An entity with the 2D component</p>
</span></dd></dl><dl class="parameter"><dt> Number time </dt><dd><span class="markdown"><p>The duration in ms of the camera motion</p>
</span></dd></dl></div><span class="markdown"><p>Centers the viewport on the given entity.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">var</span> ent = Crafty.e(<span class="hljs-string">'2D, DOM'</span>).attr({<span class="hljs-attr">x</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">y</span>: <span class="hljs-number">250</span>, <span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>});
Crafty.viewport.centerOn(ent, <span class="hljs-number">3000</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-mouselook"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.mouselook()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L468-L481">src/graphics/viewport.js#L468-L481</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.mouselook</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Boolean </span><span class="sig-noun">active</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Boolean active </dt><dd><span class="markdown"><p>Activate or deactivate mouselook</p>
</span></dd></dl></div><span class="markdown"><p>Toggle mouselook on the current viewport.
Simply call this function and the user will be able to
drag the viewport around.</p>
<p>If the user starts a drag, &quot;StopCamera&quot; will be triggered, which will cancel any existing camera animations.</p>
</span></div><div class="doclet" id="Crafty-viewport-x"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.x</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L60-L71">src/graphics/viewport.js#L60-L71</a></div><span class="markdown"><p>Will move the stage and therefore every visible entity along the <code>x</code>
axis in the opposite direction.</p>
<p>When this value is set, it will shift the entire stage. This means that entity
positions are not exactly where they are on screen. To get the exact position,
simply add <code>Crafty.viewport.x</code> onto the entities <code>x</code> position.</p>
</span></div><div class="doclet" id="Crafty-viewport-follow"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.follow()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L252-L270">src/graphics/viewport.js#L252-L270</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.follow</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">target</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">offsetx</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">offsety</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Object target </dt><dd><span class="markdown"><p>An entity with the 2D component</p>
</span></dd></dl><dl class="parameter"><dt> Number offsetx </dt><dd><span class="markdown"><p>Follow target&#39;s center should be offsetx pixels away from viewport&#39;s center. Positive values puts target to the right of the screen.</p>
</span></dd></dl><dl class="parameter"><dt> Number offsety </dt><dd><span class="markdown"><p>Follow target&#39;s center should be offsety pixels away from viewport&#39;s center. Positive values puts target to the bottom of the screen.</p>
</span></dd></dl></div><span class="markdown"><p>Follows a given entity with the 2D component. If following target will take a portion of
the viewport out of bounds of the world, following will stop until the target moves away.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">var</span> ent = Crafty.e(<span class="hljs-string">'2D, DOM'</span>).attr({<span class="hljs-attr">w</span>: <span class="hljs-number">100</span>, <span class="hljs-attr">h</span>: <span class="hljs-number">100</span>});
Crafty.viewport.follow(ent, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-onScreen"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.onScreen()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L818-L827">src/graphics/viewport.js#L818-L827</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-noun">Crafty.viewport.onScreen</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">rect</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> rect </dt><dd><span class="markdown"><p>A rectangle with field {_x: x_val, _y: y_val, _w: w_val, _h: h_val}</p>
</span></dd></dl></div><span class="markdown"><p>Test if a rectangle is completely in viewport</p>
</span></div><div class="doclet" id="Crafty-viewport-pan"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.pan()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L188-L207">src/graphics/viewport.js#L188-L207</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.pan</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">dx</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">dy</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">time</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String|function </span><span class="sig-noun">easingFn</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> Number dx </dt><dd><span class="markdown"><p>The distance along the x axis</p>
</span></dd></dl><dl class="parameter"><dt> Number dy </dt><dd><span class="markdown"><p>The distance along the y axis</p>
</span></dd></dl><dl class="parameter"><dt> Number time </dt><dd><span class="markdown"><p>The duration in ms for the entire camera movement</p>
</span></dd></dl><dl class="parameter"><dt> easingFn </dt><dd><span class="markdown"><p>A string or custom function specifying an easing.  (Defaults to linear behavior.)  See Crafty.easing for more information.</p>
</span></dd></dl></div><span class="markdown"><p>Pans the camera a given number of pixels over the specified time</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// pan the camera 100 px right and down over the duration of 2 seconds using linear easing behaviour</span>
Crafty.viewport.pan(<span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">2000</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-rect"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.rect()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L154-L178">src/graphics/viewport.js#L154-L178</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Object </span><span class="sig-noun">Crafty.viewport.rect</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">out</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> Object out </dt><dd><span class="markdown"><p>an optional Object to write the <code>rect</code> to</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>a rectangle encompassing the currently visible viewport region.         Contains the <code>_x</code>,<code>_y</code>,<code>_w</code>,<code>_h</code> properties.</p>
</span></dd></dl></div><span class="markdown"><p>Convenience method which returns a <code>rect</code> of the currently visible viewport region.
With no supplied <code>out</code> parameter, this method returns an internally reused object across invocations.
If you want to save the viewport region for later use, pass an <code>out</code> argument instead, where the region will be written to.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><p>The <code>rect</code> is equivalent to the following properties:</p>
<pre><code class="hljs "><span class="hljs-keyword">var</span> rect = Crafty.viewport.rect();

rect._x === -Crafty.viewport._x
rect._y === -Crafty.viewport._y
rect._w === Crafty.viewport._width / Crafty.viewport._scale
rect._h === Crafty.viewport._height / Crafty.viewport._scale</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-scale"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.scale()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L435-L458">src/graphics/viewport.js#L435-L458</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.scale</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">amt</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> Number amt </dt><dd><span class="markdown"><p>amount to zoom/scale in on the elements</p>
</span></dd></dl></div><span class="markdown"><p>Adjusts the scale (zoom). When <code>amt</code> is 1, it is set to the normal scale,
e.g. an entity with <code>this.w == 20</code> would appear exactly 20 pixels wide.
When <code>amt</code> is 10, that same entity would appear 200 pixels wide (i.e., zoomed in
by a factor of 10), and when <code>amt</code> is 0.1, that same entity would be 2 pixels wide
(i.e., zoomed out by a factor of <code>(1 / 0.1)</code>).</p>
<p>If you pass an <code>amt</code> of 0, it is treated the same as passing 1, i.e. the scale is reset.</p>
<p>This method sets the absolute scale, while <code>Crafty.viewport.zoom</code> sets the scale relative to the existing value.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#Crafty-viewport-zoom">.zoom</a></li></ul></div><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs ">Crafty.viewport.scale(<span class="hljs-number">2</span>); <span class="hljs-comment">// Zoom in -- all entities will appear twice as large.</span></code></pre></span></div></div><div class="doclet" id="Crafty-viewport-scroll"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.scroll()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L127-L145">src/graphics/viewport.js#L127-L145</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-noun">Crafty.viewport.scroll</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">axis</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">val</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> axis </dt><dd><span class="markdown"><p>&#39;x&#39; or &#39;y&#39;</p>
</span></dd></dl><dl class="parameter"><dt> val </dt><dd><span class="markdown"><p>The new absolute position on the axis</p>
</span></dd></dl></div><span class="markdown"><p>Will move the viewport to the position given on the specified axis</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><p>Will move the camera 500 pixels right of its initial position, in effect
shifting everything in the viewport 500 pixels to the left.</p>
<pre><code class="hljs ">Crafty.viewport.scroll(<span class="hljs-string">'_x'</span>, <span class="hljs-number">500</span>);</code></pre></span></div></div><div class="doclet" id="Crafty-viewport-zoom"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">Crafty.viewport.zoom()</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/1ef28454144100272fd439e5c3e8afb90601c00e/src/graphics/viewport.js#L337-L358">src/graphics/viewport.js#L337-L358</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">Crafty.viewport.zoom</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">amt</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">cent_x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">cent_y</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">time</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String|function </span><span class="sig-noun">easingFn</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> Number amt </dt><dd><span class="markdown"><p>amount to zoom in on the target by (eg. 2, 4, 0.5)</p>
</span></dd></dl><dl class="parameter"><dt> Number cent_x </dt><dd><span class="markdown"><p>the center to zoom on</p>
</span></dd></dl><dl class="parameter"><dt> Number cent_y </dt><dd><span class="markdown"><p>the center to zoom on</p>
</span></dd></dl><dl class="parameter"><dt> Number time </dt><dd><span class="markdown"><p>the duration in ms of the entire zoom operation</p>
</span></dd></dl><dl class="parameter"><dt> easingFn </dt><dd><span class="markdown"><p>A string or custom function specifying an easing.  (Defaults to linear behavior.)  See Crafty.easing for more information.</p>
</span></dd></dl></div><span class="markdown"><p>Zooms the camera in on a given point. amt &gt; 1 will bring the camera closer to the subject
amt &lt; 1 will bring it farther away. amt = 0 will reset to the default zoom level
Zooming is multiplicative. To reset the zoom amount, pass 0.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Make the entities appear twice as large by zooming in on the specified coordinates over the duration of 3 seconds using linear easing behavior</span>
Crafty.viewport.zoom(<span class="hljs-number">2</span>, <span class="hljs-number">100</span>, <span class="hljs-number">100</span>, <span class="hljs-number">3000</span>);</code></pre></span></div></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="/images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="/images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="/images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="/">Home</a></li>
				<li><a href="/getting-started/">Getting started</a></li>
				<li><a href="/documentation/">Documentation</a></li>
				<li><a href="/api/">API</a></li>
				<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
				<li><a href="/components/">Modules</a></li>
				<li class="emph"><a href="/#install">Download</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
